<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input v-model="params.name" placeholder="请输入内容" class="search-main" @input="gethouseList" />
      <el-button type="primary" @click="gethouseList">查询</el-button>
    </div>
    <div class="create-container">
      <el-button v-auth-btn="'park:building:add_edit'" type="primary" @click="addBuilding">添加楼宇</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="houselist">

        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="楼宇名称" width="180" prop="name" />
        <el-table-column label="层数" prop="floors" />
        <el-table-column label="在管面积(m²)" width="120" prop="area" />
        <el-table-column label="物业费(元/m²)" width="120" prop="propertyFeePrice" />
        <el-table-column ref="op" label="状态" prop="status">
          <template #default="scope">
            {{ formatStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="Delhouse(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination layout="total, prev, pager, next" :total="total" @current-change="pageChange" />
    </div>
    <ADDFLOOR
      ref="Addcomponent"
      :addlog-visible="addlogVisible"
      @closeDialog="closeDialog"
      @Nrender="gethouseList"
    />
  </div>
</template>

<script>
import { houseListAPI, DelhouseAPI } from '@/api/company'
import ADDFLOOR from './components/addfloor'
export default {
  name: 'Building',
  components: {
    ADDFLOOR
  },
  data() {
    return {
      houselist: [],
      params: {
        name: '',
        page: 1,
        pageSize: 2
      },
      total: 0,
      addlogVisible: false,
      editform: {}
    }
  },
  created() {
    this.gethouseList()
  },
  mounted() {
    // this.timein()
  },
  methods: {
    async gethouseList() {
      const res = await houseListAPI(this.params)
      this.houselist = res.data.rows
      this.total = res.data.total
    },
    formatStatus(status) {
      if (+status) {
        return '闲置中'
      } else {
        return '闲置中'
      }
    },
    async Delhouse(id) {
      await DelhouseAPI(id)
      this.gethouseList()
    },
    pageChange(page) {
      this.params.page = page
      this.gethouseList()
    },
    addBuilding() {
      this.addlogVisible = true
    },
    closeDialog() {
      this.gethouseList()
      this.addlogVisible = false
    },
    edit(id) {
      this.addlogVisible = true
      this.$refs.Addcomponent.getdetailfloor(id)
    },
    timein() {
      setInterval(() => {
        this.Delhouse(this.houselist[0].id)
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-label {
    width: 100px;
  }
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .page-container {
    padding: 4px 0px;
    text-align: right;
  }
}
</style>
